<@override name="content">
<div class="ui grid container">
    <div class="centered eight wides column" style="margin-top: 100px;">
        <div class="ui segment">
        <div class="ui center aligned header">注册新用户</div>
        <form action="/doRegister" method="post" class="ui fluid form">
            <div class="field">
                <label for="">用户名</label>
                <input type="text" name="username" id="username" placeholder="请输入用户名" autocomplete="off">
            </div>
            <div class="field">
                <label>密码</label>
                <input type="password" name="password" id="password" autocomplete="off" placeholder="请输入密码">
            </div>
            <div class="field">
                <label>重复密码</label>

                <input type="password" name="password2" id="password2" autocomplete="off" placeholder="请输入重复密码">
            </div>
            <div class="field">
                <label for="">昵称</label>
                <input type="text" name="nickname" id="nickname" placeholder="请输入昵称" autocomplete="off">
            </div>
            <div class="field">
                <label for="">电子邮件</label>
                <input type="text" name="email" id="email" placeholder="请输入电子邮件" autocomplete="off">
            </div>
            <div class="ui error message"></div>
            <a class="ui red fluid button" onclick="register()">注册</a>
        </form>
        </div>
    </div>
</div>
</@override>

<@override name="additional">
    <@super/>
<script>
    $('.ui.form').form({
        fields: {
            username: {
                rules: [
                    {
                        type: 'minLength[3]',
                        prompt: '用户名至少包含3个字符'
                    }
                ]
            },
            password: {
                rules: [
                    {
                        type: 'minLength[6]',
                        prompt: '密码至少包含6个字符'
                    }
                ]
            },
            password2: {
                rules: [
                    {
                        type: 'match[password]',
                        prompt: '密码不一致'
                    }
                ]
            },
            nickname: {
                rules: [
                    {
                        type: 'empty',
                        prompt: '昵称不能为空'
                    }
                ]
            },
            email: {
                rules: [
                    {
                        type: 'email',
                        prompt: '电子邮件格式不正确'
                    }
                ]
            }
        }

    });
    function register() {
        $('.ui.form').form('validate form');
        if ($('.ui.form').form('is valid')) {
            $.ajax({
                url: '${base}/doRegister',
                type: 'POST',
                data: $('.ui.form').serialize(),
                success: function (res) {
                    if (res.success) {
                        alert(res.message);
                        window.location.href = '${base}/main';
                    } else {
                        $('.ui.form').form('add errors', [res.message]);
                    }
                }
            })
        }
    }

</script>


</@override>
<@extends name="parent1.ftl"></@extends>